img,
a {
  -webkit-touch-callout: none;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
}

a {
  text-decoration: none;
  color: currentColor;
}

div {
  box-sizing: border-box;
}

#app {
  max-width: 640px;
  min-width: 320px;

  margin: 0 auto;
}

/* #app>* {
    padding: 0 12px;
} */

/*1. 头部header样式开始 */
.header {
  /* padding: 0 12px; */
  padding: 0 !important;
}

.header__search-box {
  display: flex;
  /* background-color: pink; */
  margin: 0 12px;
}

.header__search {
  display: flex;
  align-items: center;
  flex: 1;
  margin-top: 8px;
  height: 28px;
  background-color: #fff;
  border-radius: 14px;
  line-height: 28px;

  font-size: 16px;
  color: #666;
}

.header__search-icon {
  width: 16px;
  height: 16px;
  background: url(../img/home-common-sprite2x@v7.15.png) no-repeat;
  background-size: 21px;
  margin: 0 10px 0 15px;
}

.header__user-icon {
  width: 21px;
  height: 21px;
  background: url(../img/home-common-sprite2x@v7.15.png) no-repeat;
  background-size: 21px;
  background-position-y: -36px;
}

.header__user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 44px;
  margin-left: 8px;
  /* background-color: lightblue; */
  font-size: 12px;
  color: #fff;
}

.header__img-wrap {
  position: relative;
  /* width: calc(100% + 24px); */
  height: 184px;
  /* margin-left: -12px; */
  background: url(../img/top.jpg) no-repeat;
  background-size: 100%;
  background-position: center bottom;
}

.img_wrap_mask {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
/* 头部header样式结束 */

/* 2. 本地导航 local-nav样式开始 */

.local-nav {
    position: relative;
    display: flex;
    margin: -56px 12px 10px;
    height: 64px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    z-index: 9;
}

.local-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex:1;
    font-size: 12px;
    color: #333;
}

.local-nav__item .local-nav__icon {
    width: 40px;
    height: 40px;

    background: url(../img/home-fivemain-sprite2x@v7.15.png) no-repeat;
    background-size: 40px;
}

.local-nav__item:nth-child(2) .local-nav__icon {
    background-position-y: -40px;
}

.local-nav__item:nth-child(3) .local-nav__icon {
    background-position-y: -80px;
}

.local-nav__item:nth-child(4) .local-nav__icon {
    background-position-y: -120px;
}

.local-nav__item:nth-child(5) .local-nav__icon {
    background-position-y: -160px;
}

/* 2. 本地导航 local-nav样式结束 */

/* 3. 网格导航 grid-nav样式开始 */
.grid-nav {
  display: flex;
  flex-direction: column;

  background-color: pink;
  height: 198px;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  margin: 0 12px;
}

.grid-nav__common {
  display: flex;
  flex: 1;
  border-bottom: 1px solid #fff;
}

.grid-nav__hotel {
  background-image: linear-gradient(to right, #fa5b5b, #fa8650);
}

.grid-nav__ticket {
  background-image: linear-gradient(to right, #4b8fed, #53bbed);
}
.grid-nav__trip {
  border-bottom: none;
  background-image: linear-gradient(to right, #35c2a9, #6bd558);
}

.grid-nav__item {
  border-left: 1px solid #fff;

  /* flex-grow 1  flex-shrink 1 flex-basis auto */
  flex: 1;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  line-height: 66px;
  text-decoration: none;
  font-size: 14px;
}

.grid-nav__hotel-item {
  border-left: none;
  text-align: left;
  padding-left: 12px;
  /* flex-grow 0  flex-shrink 0   flex-basis: 31*/
  flex: 0 0 31%;
  /* width: 31%; */

  background: url(../img/grid-nav-items-hotel@v7.15.png) no-repeat;
  background-size: 73px auto;
  background-position: bottom right;
}

.grid-nav__minsu {
  background: url(../img/grid-nav-items-minsu@v7.15.png) no-repeat;
  background-size: 37px auto;
  background-position: bottom left;
}

.grid-nav__air-ticket {
  border-left: none;

  /* flex-grow 0  flex-shrink 0   flex-basis: 31*/
  flex: 0 0 31%;
  text-align: left;
  padding-left: 12px;

  background: url(../img/grid-nav-items-flight@v7.15.png) no-repeat;
  background-size: 80px;
  background-position: bottom right;
}

.grid-nav__train {
    background: url(../img/grid-nav-items-train.png) no-repeat;
    background-size: 37px;
    background-position: bottom left;
}

.grid-nav__trip-item {
  border-left: none;

  /* flex-grow 0  flex-shrink 0   flex-basis: 31*/
  flex: 0 0 31%;
  text-align: left;
  padding-left: 12px;
  background: url(../img/grid-nav-items-travel@v7.15.png) no-repeat;
  background-size: 94px;
  background-position: right bottom;
}

.grid-nav__gaotie {
    background: url(../img/grid-nav-items-dingzhi@v7.15.png) no-repeat;
    background-size: 61px;
    background-position: left bottom;
}

.grid-nav__hot {
  position: relative;
  flex: 2;
  background-image: linear-gradient(to right, #ffbd49, #ffd152);
  color: #a05416;
}

.grid-nav__hot-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url(../img/grid-nav-items-hot.png) no-repeat;
  background-size: 100% 100%;
}
/*  网格导航 grid-nav样式结束 */

/* 4. 图标导航 icon-nav样式开始 */
.icon-nav {
  display: flex;
  flex-wrap: wrap;
  padding: 0 12px 12px;
  font-size: 12px;
  color: #333;
  text-align: center;

  border-bottom: 1px solid #ccc;
}

.icon-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  flex: 0 0 20%;

  margin: 12px 0 0;
}

.icon-nav__icon {
  width: 28px;
  height: 28px;
  background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat;
  background-size: 28px;
  margin: 0 0 8px;
}


.icon-nav__item:nth-child(2) .icon-nav__icon {
  background-position-y: -28px;
}

.icon-nav__item:nth-child(3) .icon-nav__icon {
  background-position-y: -56px;
}

.icon-nav__item:nth-child(4) .icon-nav__icon {
  background-position-y: -84px;
}

.icon-nav__item:nth-child(5) .icon-nav__icon {
  background-position-y: -112px;
}

.icon-nav__item:nth-child(6) .icon-nav__icon {
  background-position-y: -140px;
}

.icon-nav__item:nth-child(7) .icon-nav__icon {
  background-position-y: -168px;
}

.icon-nav__item:nth-child(8) .icon-nav__icon {
  background-position-y: -196px;
}

.icon-nav__item:nth-child(9) .icon-nav__icon {
  background-position-y: -224px;
}

.icon-nav__item:nth-child(10) .icon-nav__icon {
  background-position-y: -252px;
}

/* 图标导航 icon-nav样式结束 */

/* 5. 底部导航 bottom-nav样式开始 */
.bottom-nav {
  display: flex;
  /* margin: 0 12px; */
  padding: 12px;
  border-bottom: 1px solid #ccc;
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #333;
}

.bottom-nav__item svg {
  width: 20px;
  height: 20px;

  color: #999;
  /* fill: #999; */

  /* 找到离他最近颜色值 */
  fill: currentColor;
}

/* 底部导航 bottom-nav样式结束 */


/* 6. footer样式 */

.footer {
    font-size: 12px;
    color: #666;
}

.footer__nav {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.footer__nav-item {
    padding: 0 5px;
}

.footer__copyright {
    color: #999;
    font-size: 12px;
    text-align: center;
}

.footer__language {
    padding: 0 16px;
}
/* footer样式结束 */